<template>
	<view class="wrapper">
	
		<view class="top">
			<view class="left">
				<image :src="blog.avatar" @tap="toOtherPage(blog.owner)" class="top-avatar"></image>
			</view>
			<view class="right">
				<view class="top-name" @tap="toOtherPage(blog.owner)" >{{blog.name}}</view>
				<view class="time">{{blog.time.substr(0,16)}}</view>
			</view>
		</view>
		
		<view class="bottom">
			<text class="text" v-show="blog.content!=''">{{blog.content}}</text>
			<view class="images" v-show="blog.images.length!=0">
				<image v-for="(url,i) in blog.images" :key="i" class="image-item" @tap="showPic(url)" :src="url"></image>
			</view>
			<view class="tip">
				<view class="options">
					<image class="icon-image" @tap="likeBlog()" :src="likesIds.includes(user.id)||likesIds.includes(user.id.toString())?'/static/icon/liked.png':'/static/icon/like.png'"></image>
					<image class="icon-image" @tap="commentBlog()" src="/static/icon/comment.png"></image>
				</view>
			</view>
			<view class="like-container" v-show="likes.length!=0">
				<view class="like-names" v-for="(like,index) in likes" :key="index">
					<view class="camma" v-show="index!=0">,</view>
					<view class="like-name" @tap="toOtherPage(like.id)">{{like.name}}</view>
				</view>
				<view v-show="likes.length!=0">{{'共'+likes.length+'人觉得很赞'}}</view>
			</view>
			<view class="commet-container" v-show="comments.length!=0">
				<view class="commet-item" v-for="(comment,i) in comments" :key="i">
					<view class="comment-name">
						<view class="who"  @tap="toOtherPage(comment.deliverId)">{{comment.deliverName}}</view>
						<view class="response" v-show="comment.fatherId!=-1">回复</view>
						<view class="to-who" @tap="toOtherPage(comment.fatherId)" v-show="comment.fatherId!=-1">{{comment.fatherName}}</view>
						<view class="colon">:</view>
					</view>
					<view class="comment-content" @longpress="deleteComment(i)" @tap="reply(comment.deliverId,comment.deliverName)">{{comment.content}}</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 评论输入框 -->
		<view class="comment-input" v-show="commentAble">
			<textarea v-model="commemtMsg" @keyup="checkText()"  :placeholder="placeholder" maxlength="60" :adjust-position='true'></textarea> 
			<button class="green" v-show="commemtMsg!=''&&commemtMsg!=' '" @tap="postComment()">确定</button>
			<button @tap="closeComment()">取消</button>
		</view>
		
	</view>
</template>

<script>
	import {getDetail,findPerson,likeBlog,commentBlog,deleteComment} from '@/api/user.js';
	import {mapGetters} from 'vuex';
	import dateUtil  from '@/util/date.js'
	export default {
		data() {
			return {
				blogId:-1,
				blog:{},
				comments:[],
				likesIds:[],
				likes:[],
				placeholder:'',
				commemtMsg:'',
				commentAble:false, //控制发送键能够按下
				replyTo:{  //回复谁
					id:-1,
					name:''
				},
			}
		},
		computed:{
			...mapGetters(['token','user'])
		},
		onLoad(options) {
			this.blogId = options.id;
			this.initDetail();
		},
		methods: {
			async deleteCommentPost(commentIndex){
				let id = this.comments[commentIndex].id;
				if(id==null||id==undefined||id==''){
					uni.showToast({
						title:'请刷新后再执行此操作！',
						icon:'none'
					})
					return;
				}
				let that = this;
				const { content: res } = await deleteComment({
					token:that.token,
					commentId:that.comments[commentIndex].id
				})
				this.comments.splice(commentIndex,1);
				uni.showToast({
					title:res,
					icon:'success'
				})
			},
			deleteComment(commentIndex){
				if(this.blog.owner!=this.user.id&&this.comments[commentIndex].deliverId!=this.user.id)	return;
				let that = this;
				 uni.showModal({
					title:'提示',
					content:'是否删除这条评论',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							that.deleteCommentPost(commentIndex);
						}
					}
				})
			},
			toMyPage(){
				uni.navigateTo({
					url:'../my/my',
					animationType:'slide-in-right'
				})
			},
			toOtherPage(id){
				if(id==this.user.id) this.toMyPage();
				else{
					uni.navigateTo({
						url:'../other/other?id='+id,
						animationType:'slide-in-right'
					})
				}
			},
			async initDetail(){
				let that = this;
				const { content: res } = await getDetail({
					blogId:that.blogId
				})
				const { content: res1 } = await findPerson({
					id:res.blog.owner
				});	
				let images = [];
				images =  res.blog.images==''?[]:res.blog.images.substr(0,res.blog.images.length-1).split(',');
				let blog = {
					id:res.blog.id,
					name:res1.nickname,
					owner:res.blog.owner,
					avatar:res1.avatar,
					content:res.blog.content,
					time:res.blog.time,
					images: images,
				}
				this.blog = blog;
				this.comments = res.comments;
				let likes = res.likes;
				this.likesIds = res.likes;
				//去重
				if(likes.length!=0)
					for(let i=1;i<likes.length;i++){
						if(likes.slice(0,i-1).includes(likes[i])){
							likes.splice(i,1);
							i--;
						}
					}
				//获取昵称
				for(let i=0;i<likes.length;i++){
					const { content: res } = await findPerson({
						id:likes[i]
					})
					let l = {
						id:res.id,
						name:res.nickname
					}
					this.likes.push(l);
				}
			},
			closeComment(){
				this.commentAble = false;
				this.blogIndex = -1;
				this.commemtMsg = '';
				this.replyTo = {
					id:-1,
					name:''
				};
			},
			checkText(){
				// #ifdef H5
				this.commemtMsg = this.commemtMsg.replaceAll('  ',' ');
				// #endif
				//#ifdef APP-PLUS
				this.commemtMsg = this.commemtMsg.replace('  ',' ');
				//#endif
				if(this.commemtMsg.length>50){
					uni.showToast({
						title:'最多50个字哦~',
						icon:'none'
					})
					this.commemtMsg = this.commemtMsg.substring(0,50);
				}
			},
			
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: 'none',
					current:url,
					urls:this.blog.images
				});
			},
			//给说说点赞
			async likeBlog(index){
				if(this.likesIds.includes(this.user.id.toString())||this.likesIds.includes(this.user.id)){
					uni.showToast({
						title:'你已经点过赞啦~',
						icon:'none'
					})
					return;
				}
				const { content: res } = await likeBlog({
					token:this.token,
					blogId:this.blog.id
				});
				this.likesIds.push(this.user.id);
				let l = {
					id:this.user.id,
					name:this.user.nickname
				}
				this.likes.push(l)
				uni.showToast({
					title: res,
					icon:'success'
				})
				
			},
			reply(id,name){
				this.replyTo.id = id;
				this.replyTo.name = name;
				this.placeholder = '回复'+name+'...';
				this.commentAble = true;
			},
			commentBlog(){
				this.commentAble = true;
				this.placeholder = '评论'+this.blog.name+'...';
			},
			async postComment(){
				const { content: res } = await commentBlog({
					token:this.token,
					blogId:this.blog.id,
					fatherId:this.replyTo.id,
					fatherName:this.replyTo.name,
					deliverName:this.user.nickname,
					content:this.commemtMsg,
					time:dateUtil.getTimeNow()
				});
				let comment = {
					token:this.token,
					blogId:this.blog.id,
					fatherId:this.replyTo.id,
					fatherName:this.replyTo.name,
					deliverId:this.user.id,
					deliverName:this.user.nickname,
					content:this.commemtMsg,
					time:dateUtil.getTimeNow()
				}
				this.comments.push(comment);
				uni.showToast({
					title:res,
					icon:'success'
				})
				this.closeComment();
			},
		}
	}
</script>

<style scoped>
	.like-container{
		margin-right: 30rpx;
		background-color: ;
		margin-top: 30rpx;
		background-color: #eaeaea;
		padding: 10rpx;
		border-radius: 5rpx;
		/* display: flex; */
	}
	.like-container text{
		font-size: 27rpx;
	}
	.like-names{
		display: flex;
	}
	.like-name{
		margin-right: 10rpx;
		font-weight: 600;
		font-size: 27rpx;
		color: rgb(92,113,153);
	}
	.bottom{
		margin: 30rpx;
	}
	.top{
		margin: 20rpx;
		padding-top: 20rpx;
		display: flex;
	}
	.top .time{
		font-size: 25rpx;
		margin-bottom: 10rpx;
	}
	.top .right{
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 20rpx;
	}
	.top-name{
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.top-avatar{
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
	}
	.comment-content{
		margin-left: 50rpx;
		margin-right: 20rpx;
		font-size: 25rpx;
	}
	.commet-item{
		display: inline-flexbox;
	}
	.comment-name .colon{
		margin-right: 20rpx;
	}
	.comment-name .to-who{
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.comment-name .response{
		margin-right: 5rpx;
	}
	.comment-name .who{
		margin-right: 5rpx;
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.comment-name{
		display: flex;
		font-size: 25rpx;
	}
	.commet-container{
		margin-right: 30rpx;
		margin-top: 20px;
		background-color: #eaeaea;
		padding: 10rpx;
		border-radius: 5rpx;
	}
	
	.icon-image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}
	.tip{
		height: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}
	.tip .time{
		position: absolute;
		color: dimgray;
		font-size: 20rpx;
	}
	.tip .options{
		position: absolute;
		right: 50rpx;
		display: flex;
	}
	.images{
		display: grid;
		grid: 210rpx / auto auto auto;
	}
	.image-item{
		border-radius: 10rpx;
		width: 90%;
		height: 200rpx;
		margin-top: 20rpx;
		margin-right: 5rpx;
	}
	.name{
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.item{
		border-bottom: lightgrey 1rpx solid;
		display: flex;
		margin-bottom: 60rpx;
		padding-bottom: 60rpx;
	}
	.text{
		font-weight: 500;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		border-radius: 20rpx;
		margin-right: 50rpx;
		font-size: 30rpx;
	}
	.comment-input{
		width: 90%;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: whitesmoke;
		position: fixed;
		bottom: 0;
		margin: 20rpx;
		display: block;
		align-items: center;
	}
	.comment-input button{
		background-color: royalblue;
		color: aliceblue;
		width: 100%;
		height: 80rpx;
		margin-top: 20rpx;
		text-align: center;
	}
	.comment-input textarea{
		height: 200rpx;
	}
	.green{
		background-color: seagreen !important;
	}	
	
	.wrapper{
		background-color: white;
		padding-bottom: 1000rpx;
	}	
</style>
